/*-------------------------------------------------
Responsive CSS
-------------------------------------------------*/
div.error {
    background: none repeat scroll 0 0 #DD6666;
    color: #FF0000;
    font-size: 12px;
    margin: 5px 0;
    padding: 5px 0;
}




/* iPhone */
@media only screen and (max-device-width: 480px) {
  body.authorization div#container, body.authorization div#main { width: auto; }
  body.authorization div#container { margin: 15px; }
  body.authorization h1 { background-image: url("https://launchpad-asset0.37signals.com/images/37s_logo_sml.png?1386799460"); padding-right: 30px; height: 40px; }
  body.authorization div.panel { padding: 7px 15px 28px 15px; background: #fff url("https://launchpad-asset0.37signals.com/images/bkd_modal_stripes_tall.gif?1386799460") repeat-x scroll top right; }
  body.authorization #app_wrapper { margin: 15px 0 5px 0; }
  body.authorization td { display: block; width: 100% !important; text-align: center; }
  body.authorization td.arrows img { display: none; }
  body.authorization td.arrows span { display: block !important; font-size: 14px; }
  body.authorization td > dl { width: 175px; margin: 0 auto; }
  body.authorization h2 { font-size: 14px; line-height: normal; margin-bottom: 0px; }
  body.authorization h5 { font-size: 10px; line-height: 1.1em; }
  img { max-width: 100%; }
}

/* iPad, landscape mode */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  body.authorization div#container { margin-top: 120px; }
}

/* iPad, portrait mode */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  body.authorization div#container { margin-top: 200px; }
}


/* on retina, use image that's scaled by 2 */
@media (min--moz-device-pixel-ratio: 1.3),
       (-o-min-device-pixel-ratio: 2.6/2),
       (-webkit-min-device-pixel-ratio: 1.3),
       (min-device-pixel-ratio: 1.3),
       (min-resolution: 1.3dppx) {
  body.authorization h1 { background-image: url("https://launchpad-asset0.37signals.com/images/37s_logo@2x.png?1386799460"); background-size: 109px 25px; }

  body.authorization div.panel { background-image: url("https://launchpad-asset2.37signals.com/images/bkd_modal_stripes@2x.gif?1386799460"); background-size: 39px 43px; }

  @media only screen and (max-device-width: 480px) {
    body.authorization div.panel { background-image: url("https://launchpad-asset0.37signals.com/images/bkd_modal_stripes_tall.gif?1386799460"); background-size: 80px 60px; }
  }
}

html > body.basecamp_only {
  background: #f5efe6 url("https://launchpad-asset0.37signals.com/images/paper.png?1386799460");
  height: 100%;
}

html > body.basecamp_only div#header h2 a {
  width: 138px;
  padding: 41px 0 0;
  height: 0;
  text-indent: -999em;
  background: url("https://launchpad-asset1.37signals.com/images/bc_logo.png?1386799460") no-repeat left top;
}

html > body.basecamp_only div#header h2 a:hover {background-position: left -41px}

html > body.basecamp_only div#other_products {background: #eae6df}

html > body.basecamp_only div.page_header h2,
html > body.basecamp_only div#header ul.nav a,
html > body.basecamp_only div#other_products div,
html > body.basecamp_only div#other_products div a,
html > body.basecamp_only div#other_products div em,
html > body.basecamp_only.users div.product div.header,
html > body.basecamp_only.edit_identity div#affected_accounts {
  color: #7D7A75;
}

html > body.basecamp_only div.panel,
html > body.basecamp_only.users div.product > div.liner {
  -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.3);
     -moz-box-shadow: 0 0 6px rgba(0,0,0,0.3);
          box-shadow: 0 0 6px rgba(0,0,0,0.3);
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

html > body.basecamp_only.users div.product div.header {
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
     -moz-border-radius-topleft: 3px;
     -moz-border-radius-topright: 3px;
          border-top-left-radius: 3px;
          border-top-right-radius: 3px;
}

html > body.basecamp_only.users div.accounts {
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
     -moz-border-radius-bottomright: 3px;
     -moz-border-radius-bottomleft: 3px;
          border-bottom-right-radius: 3px;
          border-bottom-left-radius: 3px;
}

/* on retina, use image that's scaled by 2 */
@media (min--moz-device-pixel-ratio: 1.3),
       (-o-min-device-pixel-ratio: 2.6/2),
       (-webkit-min-device-pixel-ratio: 1.3),
       (min-device-pixel-ratio: 1.3),
       (min-resolution: 1.3dppx) {
  html > body.basecamp_only { background-image: url("https://launchpad-asset0.37signals.com/images/paper.png?1386799460"); background-size: 200px 200px; }
  html > body.basecamp_only div#header h2 a { background-image: url("https://launchpad-asset3.37signals.com/images/bc_logo@2x.png?1386799460"); background-size: 138px 82px;}
}

html {background: #eee;}

body {
  font-family: helvetica, arial, sans-serif !important;
  margin: 0;
  padding: 0 30px;
}

body.users,
body.edit_identity,
body.edit_settings {
  background-color: #eee;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee'); /* IE */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #fff), color-stop(0.2, #eee)); /* webkit */
  background: -moz-linear-gradient(center top, #fff 3%, #eee 20% ); /* firefox 3.6+ */
}

body.users div#launchbar {
  position: absolute;
  width: 100%;
  display: none;
}

body.users.launching div#launchbar {
  display: block;
}

div.thanks_for_assembling {
  background: url("https://launchpad-asset0.37signals.com/images/thank_you_flash_arrow.png?1386799460") 68px bottom no-repeat; width: 730px; padding-bottom: 20px; margin-bottom: 12px; margin-top: -30px;
}

div.thanks_for_assembling > div.liner {
  background: #fffe99; padding: 20px 20px 8px 20px; border-radius: 6px;
}

div.thanks_for_assembling p {
  margin: 0 0 12px 0; font-size: 14px;
}

div.thanks_for_assembling p strong {
 font-size: 18px;
 font-weight: normal;
}

div.thanks_for_assembling p.learn_more,
div.thanks_for_assembling p.learn_more a {
  color: #33a02c;
}

div#header {
  font-size: 12px;
  text-align: right;
  height: 40px;
  padding: 15px 30px;
  margin: 0 -30px;
}

div#header h1 {
  text-align: left;
  margin: 0;
  padding: 0;
  width: 127px;
  float: left;
  vertical-align: middle;
  text-indent: -9999px;
  display: none;
}

div#header h2 {
  text-align: left;
  margin: 0;
  padding: 0;
  line-height: 29px;
  font-size: 19px;
  float: left;
  font-weight: normal;
  color: #9c6;
}

div#header h2 a {
  color: #33a02c;
  text-decoration: none;
}

body.users div#header h2 a,
body.edit_identity div#header h2 a,
body.edit_settings div#header h2 a {
  display: block;
  height: 29px;
  background: url("https://launchpad-asset3.37signals.com/images/identity_sprites.png?1386799460") no-repeat -390px -1px;
  padding-left: 136px;
}

div#header ul.nav {
  display: block;
  float: right;
  margin: 0;
  padding: 0;
  color: #000;
  line-height: 30px;
}

div#header ul.nav li {
  display: inline;
  margin: 0 0 0 10px;
  list-style: none;
}

div#header a {
  color: #555;
  text-decoration: underline;
}

div#header li.selected a {
  color: #33a02c;
}

div#container {
  margin: 0 auto;
  width: 510px;
  text-align: center;
}

div#main {
  width: 500px;
}

div.page_header {
  padding-top: 6px;
}

div.page_header h2 {
  font-size: 16px;
  font-weight: bold;
  color: #888;
  margin: 0 -25px 15px;
  padding: 0 25px 14px;
  border-bottom: 1px solid #ddd;
}

div.panel {
  margin: 10px 0 25px;
  background: #fff;
  padding: 15px 25px 25px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #aaa;
  -moz-box-shadow: 0 0 6px #999; /* firefox 3.5+ */
  -webkit-box-shadow: 0 0 6px #999; /* webkit */
  box-shadow: 0 0 6px #999;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999')"; /* IE 8+ */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999'); /* IE < = 7 */
}

body:first-of-type div.panel {border: none;}

div.panel.suite {
  margin: 0 10px 30px;
  padding: 15px 25px;
}

div.suite div.suite_identifier {
  float: left;
  width: 258px;
}

div.suite p.links {
  margin: 0;
  font-size: 11px;
}

div.suite p.links a {
  text-decoration: none;
  color: #999;
}

div.suite p.links a + a {
  margin-left: 1em;
}

div.suite div.suite_identifier h1 {
  margin-top: 12px;
  font-size: 24px;
}

div.suite div.suite_identifier h1 span.label {
  font-weight: normal;
  color: #33a02c;
}


div.loading {
  display: none;
  margin: 10px auto;
  width: 179px;
  height: 21px;
  overflow: hidden;
}

div.suite_account div.loading {
  margin: 10px -23px;
}

body.login div.loading {background: url("https://launchpad-asset0.37signals.com/images/login_sprites.png?1386799460") no-repeat 0px -850px;}
body.users div.loading {background: url("https://launchpad-asset3.37signals.com/images/identity_sprites.png?1386799460") no-repeat 0px -850px;}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}
.clearfix {display: block;}


/* ----------------------------------
Reordering
-----------------------------------*/

html, body.users, body.login {
  height: 100%;
  padding: 0;
}

body.users div.container,
body.login div.container {
  height: auto;
  min-height: 100%;
  position: relative;
  padding: 0 30px;
}

body.users div.container {padding: 0;}
body.users div#header {margin: 0; padding-bottom: 10px;}

body.users div.products {
  margin: 30px auto 0;
  padding: 0 0 65px;
}

body.users div.product {
  width: 228px;
  padding: 0 10px;
  float: left;
}

body.users div.suite div.product {
  width: 144px;
}

body.users div.product > div.liner {
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  box-shadow: 0px 0px 5px rgba(00,00,00,0.5);
  -moz-box-shadow: 0px 0px 5px rgba(00,00,00,0.5);
  -webkit-box-shadow: 0px 0px 5px rgba(00,00,00,0.5);
  border: 1px solid #ccc;
}

body:first-of-type.users div.product > div.liner {border: none; }

body.users div.product div.header {
  color: #888;
  margin: 0;
  background: #fff;
  height: 40px;
  cursor: pointer;
  text-align: center;
  -webkit-border-top-left-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

body.users div.product div.header div.liner {
  display: block;
  margin-right: 8px;
  height: 69px;
}

body.users div.product div.footer div.liner {
  margin-right: 8px;
  height: 8px;
  font-size: 4px;
}

body.users a img {
  border: 0;
}

body.users div.accounts {
  padding: 0 0 8px;
  margin-bottom: 30px;
  background: #fff;
  text-align: center;
  zoom: 1;
  -webkit-border-bottom-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

body.users div.account {
  text-align: center;
  position: relative;
  zoom: 1;
}

*:first-child+html body.users.launching div.container {
  display: none;
}

body.users > div.rocket div.account span.logo,
body.users div.product div.account span.logo {
  margin: 0 auto 3px;
  width: 98px;
  height: 0;
  background: url("https://launchpad-asset3.37signals.com/images/identity_sprites.png?1386799460") no-repeat left top;
  display: block;
  padding: 70px 0 0;
  overflow: hidden;
  text-decoration: none;
  border: none;
  background-color: none;
  position: relative;
}

span.new_label {
  position: absolute;
  top: 44px;
  left: 21px;
  background: #F3F5FC;
  padding: 3px 5px;
  color: #477B96;
  font-size: 10px;
  line-height: 12px;
  text-transform: uppercase;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
         box-shadow: 0 1px 5px rgba(0,0,0,0.3);
  -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
         border-radius: 3px;
}

body.users div.account span.logo.backpack { background-position: -97px top !important;}
body.users div.account span.logo.highrise { background-position: -194px top !important;}
body.users div.account span.logo.campfire { background-position: -291px top !important;}

body.users div.account.bcx span.logo.basecamp.personal { background-position: -992px top !important;}
body.users div.account.bcx span.logo.basecamp.personal span.new_label { display: none !important;}


body.users > div.rocket div.account div.name,
body.users div.product div.name {
  margin: 0 0 5px 0;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 0 0;
  text-align: center;
}

body.users > div.rocket div.account div.name,
body.users div.product div.account div.name {
  margin: -5px 5px 0;
  font-size: 15px;
  font-weight: bold;
  color: #333;
  padding: 0 0 10px;
}

body.users > div.rocket div.account div.name span.tagline,
body.users div.product div.account div.name span.tagline {
  display: block;
  margin-top: 3px;
  font-weight: normal;
  font-size: 12px;
  color: #888;
}

body.users div.account a {
  display: block;
  text-decoration: none;
  color: #333;
  border-top: 1px solid #ddd;
  padding: 10px 0 0;
  zoom: 1;
}

body.users div.suite_account a {border-top-color: transparent;}
body.users > div.rocket div.account a,
body.users div.account > a  {cursor: default;}
body.users div.account > a * {cursor: pointer;}

body.users div.product.reordering > div.liner {
  box-shadow: 0px 0px 25px rgba(00,00,00,0.5);
  -moz-box-shadow: 0px 0px 25px rgba(00,00,00,0.5);
  -webkit-box-shadow: 0px 0px 25px rgba(00,00,00,0.5);
}

body.users div.product div.account.reordering {
  background: rgba(255, 255, 255, 0.5);
}

body.users div.product div.account.reordering a {
  box-shadow: 0px 0px 20px #666;
  -moz-box-shadow: 0px 0px 20px #666;
  -webkit-box-shadow: 0px 0px 20px #666;
  border-bottom: 1px solid #ddd;
}

body.users div.product > div.liner {
  margin-bottom: 30px;
}

body.users div.product > div.liner div.accounts {
  margin-bottom: 0;
}

body.users > div.rocket div.account.busy {
  text-align: center;
  padding: 1px 0 0;
}

body.users > div.rocket div.account.busy a {border-top: none;}
body.users > div.rocket div.account.busy div.loading {display: block;}

body.users .blank {
  text-align: center;
  background: #fff;
  padding: 30px !important;
}

div#other_products {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #e5e5e5;
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

div#other_products div {
  display: block;
  padding: 10px 30px;
  margin: 0 auto;
  font-size: 12px;
  line-height: 15px;
  color: #ccc;
}

div#other_products div em {
  font-style: normal;
  font-weight: bold;
  color: #444;
}

div#other_products div sup {
  font-size: 8px;
}

div#other_products div a {
  text-decoration: none;
  color: #444;
}

div#other_products div li a {
  padding: 2px 5px;
}

div#other_products div a strong {
  text-decoration: underline;
}

div#other_products div a:hover {
  text-decoration: underline;
}

div#other_products li a:hover {
  text-decoration: none;
  color: #000;
  background: #fff;
}

div#other_products div a:hover strong {
  color: #33a02c;
}

div#other_products ul,
div#other_products li {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

div#other_products li {
  white-space: nowrap;
}

/*-------------------------------------------------
LOGIN
-------------------------------------------------*/

body.login {
  padding: 0;
  text-align: center;
  border: none;
  background-color:#f6f2e9;
}

body.login div#header {
  text-align: right;
  height: 40px;
  border: none;
  padding: 0;
  margin: 0;
}

body.login div#header h1 {
  text-align: left;
  margin: 10px 30px 0 0;
  padding: 0;
  text-indent: -9999px;
  width: 116px;
  float: right;
}

body.login div#login_content {
  margin: 130px auto 20px auto;
  text-align: center;
  width: 100%;
  max-width: 988px;
  background : url("/images/logo.png") no-repeat left 20px;
}



body.login.bcx div#login_content_inner,
body.login.basecamp div#login_content_inner,
body.login.highrise div#login_content_inner,
body.login.backpack div#login_content_inner,
body.login.campfire div#login_content_inner {
  background: none !important;
}

body.login.bcx div#login_content,


body.login.backpack div#other_products { display: none; }

body.login.bcx div#login_content.wide,
body.login.basecamp div#login_content.wide,
body.login.campfire div#login_content.wide,
body.login.highrise div#login_content.wide,
body.login.backpack div#login_content.wide {
  background-position: 60px 42px;
}

body.login div.dialog_contents {
  padding: 6px 0;
}

body.login div#signin_button input { width: 85px; }

body.login div.login_dialog {
  width: 210px;
  margin: 0 auto;
  background: #fff;
  padding: 10px 39px 19px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  border: 1px solid #aaa;
  -moz-box-shadow: 0 0 6px #999; /* firefox 3.5+ */
        -webkit-box-shadow: 0 0 6px #999; /* webkit */
        box-shadow: 0 0 6px #999;
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999')"; /* IE 8+ */
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999'); /* IE < = 7 */
}

body:first-of-type.login div.login_dialog {border: none;}

*:first-child+html body.login div.login_dialog {
  padding: 25px 39px 25px;
}

body.login div#login_content.wide div.login_dialog {
  width: 435px;
  padding: 10px 29px 25px;
}

body.login div.login_dialog h1 {
  font-size: 16px;
  font-weight: normal;
  line-height: 19px;
  margin: 13px 0 15px;
}

body.login div.login_dialog h1 strong {
  display: block;
  font-size: 18px;
}

body.login div.login_dialog div#remember_container {
  font-size: 12px;
  color: #333;
  margin: 0 0 15px;
}

body.login div.login_dialog div#user_name_login input {
  font-size: 18px;
  padding: 3px;
  width: 200px;
  font-family: helvetica, arial, sans-serif;
}

body.login div.login_dialog p {
  margin: 0 0 10px;
}

body.login div.login_dialog span.overlay_wrapper {
  position: relative;
  top: 0;
  left: 0;
  background: white;
}

body.login div.login_dialog span.overlay_wrapper input {
  position: relative;
  background: none;
  top: 0;
  z-index: 10;
}

body.login div.login_dialog span.overlay_wrapper label.overlabel {
  position: absolute;
  top: -2px;
  left: 6px;
  z-index: 1;
  color: #999 !important;
  font-size: 18px;
}

*:first-child+html body.login div.login_dialog span.overlay_wrapper label.overlabel {
  top: 6px;
  left: 5px;
}

body.login div.login_dialog span.overlay_wrapper label.focus {
  color: #ccc !important;
}

body.login div#login_loading {
  display: none;
  margin: 5px 10px;
}

body.login div#login_loading div.loading {
  display: block;
}

body.login div.extras {
  text-align: left;
  margin: 10px auto;
  width: 300px;
  text-align: center;
  color: #000;
}

body.login div.extras ul {
  margin: 0;
  padding: 0;
}

body.login div.extras ul li {
  list-style: none;
  font-size: 12px;
  margin-bottom: 3px;
}

*:first-child+html body.login div.extras ul li {
  margin-bottom: 0;
}

body.login div.extras a {
  color: #33a02c;
}

span.hint,
span.hint a {
  font-size: 10px;
  color: #999;
  display: block;
  text-align: left;
  display: none;
}

.imgClass {
    background: none repeat scroll 0 0 #759e1a;
    border: 0;
    border-radius: 10px;
    color: #FFFFFF;
    height: 30px;
}

.imgClass:hover {
    cursor: pointer;
}

div#signin_button {
    height: 30px;
}